<template>
  <div class='song-table'>
    <el-dialog
      :title='!songForm.id ? '新增' : '修改''
      :visible.sync='songAddDialogVisible"
      :close-on-click-modal="false"
       width="50%" :center="true">
      <el-form :model="songForm" ref="songForm" label-width="80px">
          <el-form-item prop="name" label="歌曲名" size="mini">
            <el-input v-model="songForm.name" placeholder="歌曲名"></el-input>
          </el-form-item>
        <el-form-item prop="singerId" label="歌手id" size="mini" hidden>
        </el-form-item>
        <el-form-item prop="singerName" label="歌手名" size="mini" >
          <template>
            <el-select  @change="singerSelectChange" v-model="songForm.singerName"   filterable placeholder="请选择">
              <el-option
                v-for="item in singerList"
                  :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item prop="pic" label="歌曲封面" size="mini">
          <singlePicUpload v-model="songForm.pic" @input="inputPicUrlHandler" ></singlePicUpload>
        </el-form-item>
        <el-form-item prop="url" label="文件路径" size="mini">
          <singleFileUpload v-model="songForm.url" @input="inputFileUrlHandler" ></singleFileUpload>
        </el-form-item>
        <el-form-item prop="introduction" label="介绍" size="mini">
          <el-input v-model="songForm.introduction" placeholder="介绍" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" type="warning" @click="songAddDialogVisible=false">取消</el-button>
        <el-button size="mini"  type="primary" @click="addSong">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import singlePicUpload from '@/components/upload/singlePicUpload'
import singleFileUpload from '@/components/upload/singleFileUpload'
export default {
  name: 'song-add-or-update',
  components: {
    singlePicUpload,
    singleFileUpload
  },
  data () {
    return {
      songAddDialogVisible: false,
      songForm: {
        id: '',
        singerId: '',
        singerName: '',
        name: '',
        createTime: '',
        updateTime: '',
        pic: '',
        url: '',
        lyric: '',
        location: '',
        introduction: ''
      },
      singerList: []
    }
  },
  created: {
  },
  methods: {
    singerSelectChange (singerId) {
      for (let i = 0; i < this.singerList.length; i++) {
        if (singerId === this.singerList[i].id) {
          this.songForm.singerName = this.singerList[i].name
        }
      }
      console.log(singerId)
    },
    inputPicUrlHandler (url) {
      console.log(url)
      console.log(11112)
      this.songForm.pic = url
    },
    inputFileUrlHandler (url) {
      console.log(url)
      console.log(22223)
      this.songForm.url = url
    },
    init (id) {
      let that = this
      console.log(id)
      this.songForm.id = id || 0
      this.songAddDialogVisible = true
      this.$nextTick(() => {
        this.$refs['songForm'].resetFields()
        if (this.songForm.id) {
          this.$api.getSongById({
            params: {id: id}
          }).then((res) => {
            console.log(res.data)
            if (res.data && res.data.code === 200) {
              console.log(22222)
              this.songForm.name = res.data.data.name
              this.songForm.singerId = res.data.data.singerId
              this.songForm.singerName = res.data.data.singerName
              this.songForm.pic = res.data.data.pic
              this.songForm.url = res.data.data.url
              this.songForm.introduction = res.data.data.introduction
            }
          })
        }
      })
      that.$api.getSingerList({params: {}}).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          that.singerList = res.data.data
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    addSong () {
      let that = this
      let params = {
        name: this.songForm.name,
        singerId: this.songForm.singerId,
        singerName: this.songForm.singerName,
        url: this.songForm.url,
        pic: this.songForm.pic,
        introduction: this.songForm.introduction
      }
      if (!this.songForm.id) {
        console.log(6666)
        console.log(params)
        this.$api.addSong(params).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            that.songAddDialogVisible = false
            that.$emit('refreshDataList')
          } else {
            console.log(res.data)
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        params.id = this.songForm.id
        this.$api.updateSong(params).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            that.songAddDialogVisible = false
            that.$emit('refreshDataList')
          } else {
            console.log(res.data)
          }
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
}
</script>

<style scoped>
  .song-table{
    margin: auto;
    width: 80%;
  }
  .song-img{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    overflow: hidden;
  }
  body .el-table th.gutter{
    display: table-cell!important;
  }

</style>
